<template>
  <div id="show-blogs" v-theme:column="'narrow'">
      <h1>博客总览</h1>
      <input type="text" name="" v-model="search" id="" placeholder="搜索">
      <div class="single-blog" v-for="(blog, i) in filterdBlogs" :key="i">
          {{i | ToAdd(1)}}
          <router-link :to="'/blog/' + blog.id">
            <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
          </router-link>
          <article>
              {{blog.body | snippet}}
          </article>
      </div>
  </div>
</template>

<script>
import axios from "../axios-config";
export default {
  name: 'show-blogs',
  data () {
    return {
        blogs:[],
        search:""
    }
  },
  created(){
            // 请求本地数据src\assets\posts.json
        // this.$http.get('./../static/posts.json').then(function(data){
            // 请求远地数据
        // this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data){   
        // console.log("********************",data);
        // this.blogs = data.body.slice(0,10);
        // console.log(this.blogs)

        axios.get('/posts')
        .then((data)=>{   
        console.log("********************",data.data);
        // this.blogs = data.body.slice(0,10);
        this.blogs = data.data;
      })
  },
  computed:{
      filterdBlogs:function(){
          return this.blogs.filter((blog) => {
              return blog.title.match(this.search)
          })
      }
  },
  filters:{
    //   "to-uppercase":function(val){
    //       return val.toUpperCase()
     ToUppercase(val){
          return val.toUpperCase()
      },
      ToAdd(val,i){
          var la = val + i
          var value = '第--'+ la +'--条' 
          return value
      }
  },
  directives:{
      "rainbow":{
        bind(el, binding, vnode) {
        el.style.color = "#" + Math.random().toString(16).slice(2,8);
  }
      }
  }
}
</script>


<style scoped>
    #show-blogs{
        max-width: 800px;
        margin: 85px auto 20px;
    }
    #show-blogs a{
        color: #444;
        text-decoration: none;
    }
    .single-blog{
        padding: 20px;
        margin: 20px 0;
        box-sizing: border-box;
        background-color: #eee;
        border: 1px dotted #aaa;
    }
    input[type="text"]{
        padding: 8px;
        width: 100%;
        box-sizing: border-box;
    }
</style>
